<template>
  <div class="app-container home">
    <div v-hasRole="['common']">
      <h2>
        <blockquote>
          <p>视频展示</p>
        </blockquote>
      </h2>
      <el-select v-model="search">
        <el-option
          v-for="item in tags"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button @click="()=>{search= ''}">重置</el-button>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in videoList" :key="item.id">
            <el-card shadow="hover" style="margin-bottom: 20px;">
              <video width="300" height="200" controls  :src="'http://localhost/dev-api/'+item.url">
              </video>
              <el-divider></el-divider>
              <h2>{{ item.name }}</h2>
              <el-tag>{{ item.tag }}</el-tag>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <div v-hasRole="['ad']" >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div id="chart1" style="width: 100%;height: 200px">
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div id="chart2" style="width: 100%;height: 200px">
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div id="chart3" style="width: 100%;height: 200px">
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div id="chart4" style="width: 100%;height: 200px">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index">
import {listVideo} from "@/api/system/video.js";
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import {listBorrow} from "@/api/system/borrow.js";
import {listStall} from "@/api/system/stall.js";
import {listLocation} from "@/api/system/location.js";
import {listDevices} from "@/api/system/devices.js";
import {listUser} from "@/api/system/user.js";

const videoList = ref([]);
const staticList = ref({});
const _videoList = ref([]);
const tags = ref([])
const search = ref('')
watch(search ,(newVal,oldVal)=>{
  console.log(newVal)
  if(newVal === ''){
    videoList.value = _videoList.value
  }else{
    videoList.value = _videoList.value.filter(item=>item.tag === newVal)
  }
})
const getVideoList = ()=>{
  listVideo({pageNum:1,pageSize:1000}).then(res => {
    videoList.value = res.rows
    videoList.value.forEach(item=>{
      if(tags.value.indexOf(item.tag) === -1){
        tags.value.push(item.tag)
      }
    })
    _videoList.value = videoList.value
  })
}
const getStaticList = ()=>{
  staticList.value['cnt'] = {} ;
  staticList.value['daily'] = {};
  const res1 = listDevices({pageNum:1,pageSize:1000}).then(res => {
    let data = res.rows;
    let o = {};
    o['avail'] = 0
    o['unavail'] = 0
    data.forEach(item=>{
      if(item.status === '可借'){
        o['avail'] =  o['avail']+1;
      }else{
        o['unavail'] =  o['unavail']+1;
      }
    })
    o['total'] = data.length;
    staticList.value['device'] = o;
    staticList.value['cnt']['device'] = data.length;
  })
 const res2=  listBorrow({pageNum:1,pageSize:1000}).then(res => {
    let data = res.rows;
    let o = {};
   o['overdue'] = 0
   o['borrow'] = 0
    data.forEach(item=>{
      let endTime = dayjs(item.endTime)
      let startTime = dayjs(item.startTime)
      let startDay = startTime.format('YYYY-MM-DD')
      let endDay = endTime.format('YYYY-MM-DD')
      if(staticList.value['daily'][startDay] == null){
        staticList.value['daily'][startDay]= {};
        staticList.value['daily'][startDay]['borrow'] = 1;
        staticList.value['daily'][startDay]['return'] = 0;


      }else{
        staticList.value['daily'][startDay]['borrow'] = staticList.value['daily'][startDay]['borrow']+1;
      }
      if(staticList.value['daily'][endDay] == null){
        staticList.value['daily'][endDay] = {};
        staticList.value['daily'][endDay]['return'] = 1;

        staticList.value['daily'][endDay]['borrow'] = 0;
      }else{
        staticList.value['daily'][endDay]['return'] = staticList.value['daily'][endDay]['return']+1;

      }
      let overdue = endTime.isBefore(dayjs())

      if(overdue && item.status ==='未归还'){
        o['overdue'] = o['overdue']+1;
      }else{
        o['borrow'] =  o['borrow']+1;
      }
    })
    staticList.value['borrow'] = o;
  })
  const res3 = listStall({pageNum:1,pageSize:1000}).then(res => {
    let data = res.rows;
    staticList.value['cnt']['stall'] = data.length;
  })
  const res4 = listVideo({pageNum:1,pageSize:1000}).then(res => {
    let data = res.rows;
    staticList.value['cnt']['video'] = data.length;
  })
  const res5 = listUser({pageNum:1,pageSize:1000}).then(res => {
    let data = res.rows;
    staticList.value['cnt']['user'] = data.length;
  })

  return Promise.all([res1,res2,res3,res4,res5])
}




onMounted(()=>{
  getVideoList();

  getStaticList().then(()=>{

    let chart1 = echarts.init(document.getElementById('chart1'));
    // 饼图
    let options = {
      title: {
        text: '设备状态统计',
        subtext: '设备状态统计',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['可借', '不可借']
      },
      series: [
        {
          name: '设备状态',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: staticList.value.device.avail, name: '可借'},
            {value: staticList.value.device.unavail, name: '不可借'},
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart1.setOption(options);
    let chart2 = echarts.init(document.getElementById('chart2'));
    // 饼图
    let option2 = {
      title: {
        text: '借还状态统计',
        subtext: '借还状态统计',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['未归还', '已归还']
      },
      series: [
        {
          name: '借还状态',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: staticList.value.borrow.overdue, name: '未归还'},
            {value: staticList.value.borrow.borrow, name: '已归还'},
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart2.setOption(option2);
    let chart3 = echarts.init(document.getElementById('chart3'));
    // 柱状图
    let option3 = {
      title: {
        text: '数量统计',
        subtext: '数量统计',
        x: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['设备', '视频', '用户', '智能柜数量']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: ['设备', '视频', '用户', '智能柜数量']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [staticList.value.cnt.device.total, staticList.value.cnt.video, staticList.value.cnt.user, staticList.value.cnt.stall],
        }
      ]
    };
    chart3.setOption(option3);
    let chart4 = echarts.init(document.getElementById('chart4'));
    console.log(Object.keys(staticList.value.daily))
    console.log(staticList.value.daily)
    //折线图
    let option4 = {
      title: {
        text: '每日借还数量统计',
        subtext: '每日借还数量统计',
        x: 'top-left'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['当日借出', '当日应还']
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: Object.keys(staticList.value.daily)
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '借出',
          type: 'line',
          data: Object.keys(staticList.value.daily).map(item=>staticList.value.daily[item].borrow)
        },
        {
          name: '归还',
          type: 'line',
          data: Object.keys(staticList.value.daily).map(item=>staticList.value.daily[item].return)
        }
      ]
    };
    chart4.setOption(option4);
  })




})




</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

